page{
    height: 100%;
    background-color: #fff;

}

.page{
    overflow: scroll;
    
    .top{
        position: relative;
        height: 100vw;

        .bg{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        .title{
            position: absolute;
            top: 50rpx;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            width: 480rpx;
            border-bottom: 1px solid rgba(#a26b48, .3);
            text-align: center;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 34rpx;
            color: #773B14;
        }

        .coupon-title{
            position: absolute;
            top: 202rpx;
            z-index: 2;
            left: 50%;
            transform: translateX(-50%);
            
            image{
                width: 278rpx;
            }

            &::after,
            &::before{
                content:' ';
                position: absolute;
                height: 2rpx;
                width: 50rpx;
                background-color: #A26B48;
                top: 50%;
                transform: translateY(-50%);
            }

            &::before{
                left: -62rpx;
            }

            &::after{
                right: -62rpx;
            }
        }

        .coupon-content{
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 303rpx;
            transform: translateX(-50%);
            width: 562rpx;
            height: 76rpx;
            display: flex;
            justify-content: center;
            align-items:end;

            .num{
                // width: 220rpx;
                text-align: right;
                font-size: 76rpx;
                line-height: 52rpx;
                color: #773B14;
                font-weight: 600;
            }

            .symbol{
                font-size: 28rpx;
                line-height: 28rpx;
                font-weight: 800;
                color: #773B14;
                margin-left: 10rpx;
            }

            .line{
                width: 4rpx;
                height: 100%;
                background-color: #A26B48;
                margin: 0 20rpx;
            }

            .label{
                font-size: 44rpx;
                font-weight: bold;
                color: #A26B48;
                line-height: 44rpx;
            }
        }

        .btn{
            position: absolute;
            z-index: 2;
            left: 50%;
            transform: translateX(-50%);
            bottom: 78rpx;
            width: 330rpx;
            height: 68rpx;
            background: linear-gradient(-10deg, #C9A98D, #F8E6D2);
            border-radius: 68rpx;
            color: #773B14;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            box-sizing: border-box;

            &.white{
                background: #fff;
                border:1px solid #C9A98D;
            }
        }
    }

    .bottom-wrap{
        box-sizing: border-box;
        width: 100%;
        padding: 0 24rpx;
        margin: 80rpx 0;

        .bottom{
            position: relative;
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx 40rpx;
            border-radius: 12rpx;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

            .title{
                height: 80rpx;
                position: absolute;
                top: -40rpx;
                left: 50%;
                transform: translateX(-50%);
                border:2px solid rgba(252,242,232,1);
                display: flex;
                align-items: center;
                padding: 0 80rpx;
                background-color: #fff;
                color: rgba(175,106,25,1);
                border-radius: 80rpx;
                font-size: 40rpx;
                font-weight: 600;
            }

            .content{
                margin-top: 80rpx;

                .text{
                    color: rgba(112,68,19,1);
                    font-size: 30rpx;
                    line-height: 60rpx;

                }
            }

        }
    }

    .btn-wrap{
        width: 100%;
        box-sizing: border-box;
        padding: 0 80rpx;
        margin-bottom: 160rpx;

        .btn{
            height: 100rpx;
            width: 100%;
            background-color: rgba(175,106,25,1);
            border-radius: 100rpx;
            display: flex;
            align-items: center;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}